<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
    <title>{{ chart.title | replace({'<br/>': ' - '}) | striptags }}</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=0.95, maximum-scale=0.95, user-scalable=0" />
    <script type="text/javascript">
    if (window.parent && window.parent.postMessage) {
        window.parent.postMessage('datawrapper:vis:reload', '*');
    }
    </script>
    {% if preview %}
    {% include "sentry.twig" %}
    {% endif %}
    {# <!--[if lt IE 7]>
    <meta http-equiv="refresh" content="0;URL='static.html'">
    <![endif]--> #}
    <!--[if lt IE 9]>
    <script src="{{ config.static_path }}/vendor/json-js/json2.min.js"></script>
    <script type="text/javascript">
        window.__ltie9 = true;
    </script>
    <![endif]-->
    {% if innersvg %}
    <script type="text/javascript" charset="utf-8" src="{{ config.static_path }}/vendor/innersvg/innersvg.js"></script>
    {% endif %}

        {{ hook('chart_html_head', chart) }}

{% for src in stylesheets %}
    <link rel="stylesheet" type="text/css" href="{{ src }}?v={{ vis_version }}"></link>
{% endfor %}

    <script type="text/javascript" charset="utf-8">
    window.__locale = '{{ chartLocale }}';
    </script>

{% for script in scripts %}
  {% if script.ie %}<!--[if {{ script.ie }}]>
  {% endif %}
    <script type="text/javascript" charset="utf-8" src="{% if script.src %}{{ script.src }}{% else %}{{ script }}{% endif %}?v={{ vis_version }}"></script>
  {% if script.ie %}<![endif]-->
  {% endif %}
{% endfor %}

    <script type="text/javascript">
        (function() {
            dw.theme.register('{{ theme.id }}', {{ theme.getThemeData() | json | raw }});
        }).call(this);
    </script>


    <style type="text/css">
        {{ themeCSS | raw }}
        {% if nopointer %}
        body { pointer-events: none }
        {% endif %}
    </style>

    {{ hook('chart_html_head_end', chart) }}

</head>
<body class="dw-chart chart{% if fullscreen %} fullscreen{% endif %}{% if plain %} plain{% endif %} vis-height-{{ visualization.height ? visualization.height : "fit" }} theme-{{ chart.theme }} vis-{{ chart.type }}">
    {{ hook('chart_before_body', chart, published) }}

    {# some convenient short cuts for theme templates #}
    {% set title = chart.title %}
    {% set intro = chart.getMetadata('describe.intro') %}
    {% set notes = chart.getMetadata('annotate.notes') %}
    {% set source = chart.getMetadata('describe.source-name') %}
    {% set sourceURL = chart.getMetadata('describe.source-url') %}
    {% set byline = chart.getMetadata('describe.byline') %}

    <div class="dw-chart-header" id="header">
        {% if not plain %}
            <h1 {% if not title or chart.getMetadata('describe.hide-title') %}class="hidden"{% endif %}>
                <span class="chart-title">{{ title | purify | raw }}</span>
            </h1>

            <p class="chart-intro{% if not intro %} hidden{% endif %}">{{ intro | purify | raw }}</p>
        {% endif %}
    </div>

    <div class="dw-chart-body" id="chart"></div>

    {% if not plain %}
        {% if theme.getThemeData("options.footer.notesPosition") != "under-footer" %}
            <div class="dw-chart-notes {% if not notes %}hidden{% endif %}">
                {{ notes | purify | raw }}
            </div>
        {% endif %}
    {% endif %}

    {% if chartSource and theme.getThemeData("options.footer.sourcePosition") == "above-footer" %}
        {% set sourceCaption = theme.getThemeData('options.footer.sourceCaption') %}
            <span class="footer-block source-block">
                                    {{ sourceCaption }}:
                {{ chartSource | purify | raw }}</span>
    {% endif %}

    {% if theme.getThemeData('template.afterChart') %}
        {{ theme.getThemeData('template.afterChart') | raw }}
    {% endif %}

    {% if not plain %}
        <div class="dw-chart-footer" id="footer">
            <div class="footer-left">
                {% if theme.getThemeData('options.footer.logo.position') == "left" and theme.getThemeData('options.footer.logo.enabled') %}
                    {% if theme.getThemeData('options.footer.logo.url') %}
                        <img height="{{ theme.getThemeData('options.footer.logo.height') }}" src="{{ theme.getThemeData('options.footer.logo.url') }}">
                    {% endif %}
                {% endif %}

                {% if theme.getThemeData("options.footer.sourcePosition") == "left" or theme.getThemeData("options.footer.sourcePosition") == "above-footer" %}
                    {% block footer %}

                        {% if chartBasedOn %}
                        <span class="footer-block byline-block">
                            {{ theme.getThemeData('options.footer.forkCaption') | capitalize }}
                            <span class="chart-based-on">{{ chartBasedOn | purify | raw }}</span>
                        </span>
                        {% else %}
                        <span class="footer-block byline-block {% if not byline %}hidden{% endif %}">
                            {{ chart.caption == 'map' ?
                                theme.getThemeData('options.footer.mapCaption') :
                                chart.caption == 'table' ?
                                theme.getThemeData('options.footer.tableCaption') :
                                theme.getThemeData('options.footer.chartCaption') }}
                            <span class="chart-byline">{{ chartByline | purify | raw }}</span>
                        </span>
                        {% endif %}


                        {% if theme.getThemeData("options.footer.sourcePosition") != "above-footer" %}
                        <span class="footer-block source-block {% if not source %}hidden{% endif %}">
                            {% set sourceCaption = theme.getThemeData('options.footer.sourceCaption') %}
                            <span class="separator"></span>
                            {{ sourceCaption }}:
                            <a href="{{sourceURL}}" rel="nofollow noopener noreferrer" target="_blank">{{ source | purify | raw }}</a>
                        </span>
                        {% endif %}

                        {{ hook('chart_footer_after_source', chart) }}

                        {# GET THE DATA #}
                        {% if not visualization['json-data'] and theme.getThemeData("options.footer.getTheData.enabled") %}
                        <span class="footer-block chart-action-data">
                            {% set getTheDataCaption = theme.getThemeData("options.footer.getTheData.caption") %}
                            {% if getTheDataCaption %}
                            <span class="separator"></span>
                            {% endif %}
                            <a href="data">{% trans getTheDataCaption %}</a>
                        </span>
                        {% endif %}

                        {# EMBED #}
                        {% if theme.getThemeData("options.footer.embed.enabled") %}
                        <span class="footer-block embed">
                            {% if theme.getThemeData("options.footer.embed.caption") %}
                            <span class="separator"></span>
                            {% endif %}
                            <a class="chart-action-embed" href="#embed">{{ theme.getThemeData("options.footer.embed.caption") }}</a>

                            <div class="embed-code hide">
                                <div class="close">×</div>
                                <div>
                                    {% if theme.getThemeData("options.footer.embed.text") %}
                                        {{ theme.getThemeData("options.footer.embed.text") }}
                                    {% else %}
                                        Please use the following HTML code to embed this chart:
                                    {% endif %}
                                </div>
                                <textarea>{{ embedCode }}</textarea>
                            </div>
                            <script type="text/javascript">
                                $('a.chart-action-embed, .embed-code .close').click(function(e) { e.preventDefault(); $('.embed-code').toggleClass('hide'); });
                                $('.embed-code textarea').click(function() { $(this).focus().select(); });
                            </script>
                        </span>
                        {% endif %}

                        {# STATIC IMAGE #}
                        {% if theme.getThemeData("options.footer.staticImage.enabled") %}
                        <span class="footer-block static-image">
                            {% if theme.getThemeData("options.footer.staticImage.caption") %}
                            <span class="separator"></span>
                            {% endif %}
                            <a class="chart-action-image" target="_blank" href="//img.datawrapper.de/{{ chart.id }}/full.png">
                                {{ theme.getThemeData("options.footer.staticImage.caption") }}
                            </a>
                        </span>
                        {% endif %}

                        {# CREATED WITH DATAWRAPPER #}
                        {% if theme.getThemeData("options.footer.createdWithDatawrapper") %}
                        <span class="footer-block attribution">
                            <span class="separator"></span>
                            <a href="{% if has_hook('chart_created_with_datawrapper_url') %}{{ hook_return('chart_created_with_datawrapper_url', chart)[0] }}{% else %}{{ DW_DOMAIN }}{% endif %}" target="_blank">{{ theme.getThemeData("options.footer.createdWithCaption") }}  {% trans "Datawrapper" %}</a>
                        </span>
                        {% endif %}

                        {% if theme.getThemeData('options.footer.logo.position') == "left" and theme.getThemeData('options.footer.logo.enabled') and theme.getThemeData('options.footer.logo.text') %}
                            <div class="logo-text"> <span class="logo-text">{{ theme.getThemeData('options.footer.logo.text')}} </span></div>
                        {% endif %}
                    {% endblock %}
                {% endif %}
            </div>
            <div class="footer-right">
                {% if theme.getThemeData("options.footer.sourcePosition") and theme.getThemeData("options.footer.sourcePosition") == "right" %}
                    {{ block('footer') }}
                {% endif %}

                {% if theme.getThemeData('options.footer.logo.enabled') and theme.getThemeData('options.footer.logo.position') == "right" %}
                    {% if theme.getThemeData('options.footer.logo.url') %}
                        <img height="{{ theme.getThemeData('options.footer.logo.height') }}" src="{{ theme.getThemeData('options.footer.logo.url') }}">
                    {% endif %}
                    {% if theme.getThemeData('options.footer.logo.text') %}
                        <span class="logo-text"> {{ theme.getThemeData('options.footer.logo.text')}} </span>
                    {% endif %}
                {% endif %}
            </div>
        </div>
    {% endif %}

    {% if not plain %}
        {% if theme.getThemeData("options.footer.notesPosition") == "under-footer" %}
            <div class="dw-chart-notes {% if not notes %}hidden{% endif %}">
                {{ notes | purify | raw }}
            </div>
        {% endif %}
    {% endif %}


    {# <div class="noscript" style="position: absolute;top: 0;left: 0;z-index: -10;">
        <a href="static.html"><img src="nojs.png" alt="{% trans "Please activate JavaScript to see the interactive chart." %}" /></a>
    </div>
    <div class="noscript" style="height:95%;position:absolute;top:0;width:98%;z-index:10;overflow:hidden">
        <div style="position:relative;top:50%;text-align:center;font-size:18px;padding:0 20px"><a style="color: rgba(0,0,0,.2); text-shadow: 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff; text-decoration: none;" href="static.html" >{% trans "Please activate JavaScript to see the interactive chart." %}</a></div>
    </div>#}

    {{ hook('chart_after_body', chart, published) }}

    <script type="text/javascript" charset="utf-8">

    (function() {

        {% include 'chart/render.js.twig' %}

        render({
            visJSON: {{ visualization | json | raw }},
            chartJSON: {{ chart.toStruct(true) | json | raw }},
            chartData: {{ chartData | json | raw }},
            isPreview: {{ preview ? 'true' : 'false' }},
            chartLocale: '{{ chartLocale }}',
            locales: {{ locales | raw }},
            metricPrefix: {{ metricPrefix | json | raw }},
            themeId: "{{ theme.getId() }}",
            fontsJSON: {{ theme.getAssetFonts() | json | raw }},
            typographyJSON: {{ theme.getThemeData('typography') | json | raw }},
            templateJS: {% if theme.getThemeData('template.js') %}
function() {
    {{ theme.getThemeData('template.js') | raw }}
}
{% else %}
false
{% endif %}
        });

    })();

    </script>

</body>
</html>
